<template>
	<view class="container" v-show="hideModal">
		<!-- @click="close()" -->
		<view class="mask" @touchmove.stop.prevent></view>
		<view class="content bottom-pos" :animation="animationData" @touchmove.stop.prevent>
			<view class="navBar">
				<text style="color: #A5A5A5;" @click="close()">取消</text>
				<text style="color:#FF7F00;opacity: 0.6;" @click="save()">保存</text>
			</view>
			<block v-if="type=='name'">
				<view class="form-item">
					<text class="tips">修改名字</text>
					<view class="inputClass">
						<input type="text" v-model="profile[type]" 
							:auto-blur="true" placeholder="请添加一个名字" />
					</view>
				</view>
			</block>
			<block v-if="type=='username'">
				<view class="form-item">
					<text class="tips">修改账号</text>
					<view class="inputClass">
						<!-- 	<input type="text" :value="profile[type]" :auto-blur="true" 
							placeholder="请添加一个名字" /> -->
						<input type="text" v-model="profile[type]" data-key="username" placeholder="4-10位字母的组合"
							maxlength="10" :auto-blur="true" />
						<span style="color: red;">{{tip[0]}}</span>
					</view>

				</view>
			</block>
			<block v-if="type=='sex'">
				<view class="form-item">
					<text class="tips">请选择性别</text>
					<view class="sexClass">
						<view class="uni-list-cell" @click="chooseSex(1)" style="border-bottom:1px #DCDFE6 solid;">
							<view class="uni-list-cell-db">男</view>
							<uni-icons type="checkmarkempty" v-show="profile[type]==1" color="#FF7F00" size="30">
							</uni-icons>

						</view>
						<view class="uni-list-cell" @click="chooseSex(0)">
							<view class="uni-list-cell-db">女</view>
							<uni-icons type="checkmarkempty" v-show="profile[type]==0" color="#FF7F00" size="30">
							</uni-icons>
						</view>
					</view>
				</view>
			</block>
			<block v-if="type=='info'">
				<view class="form-item">
					<text class="tips">请填写简介</text>
					<view class="textClass" style="white-space:pre-line;">
						<textarea v-model="profile[type]" @input="sumfontnum" maxlength="100"
							placeholder="填写简介"></textarea>
						<text class="fontnum">{{fontnum}}/100</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {updateUser} from"@/api/user.js"
	import {
		mapActions
	} from 'vuex';
	export default {
		name: 'writeOff',
		props: {
			show: {
				type: Boolean,
				required: true
			},
			param: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				showSexChex: false,
				hideModal: false, //模态框的状态  true-隐藏  false-显示
				animationData: {}, //
				val: 0,
				profile: {},
				fontnum: 0,
				type: '',
				tip:[],
				temp:{}
			}
		},
		created() {
			// this.temp=this.$store.state.userInfo
		},
		watch: {
			show(val) {
				if (val) {
					this.showModal()
				}
			},
			param: {
				handler(newValue, oldName) {
					this.profile = newValue
					this.type = this.profile.type
					this.fontnum = this.profile.info?.length
				},
				immediate: true,
				deep: true
			}

		},
		methods: {
			...mapActions["updateUserInfo"],
			save() {
				updateUser(this.profile).then(res=>{
					if(res.code==200){                         
						this.$store.dispatch("updateUserInfo",res.data);
						this.$commonFunc.msg(res.msg)
						this.close()
					}
					else{
						// this.profile=this.temp;
						this.$commonFunc.msg(res.msg)
					}
				})
				
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				if (key == "username") {
					const inputRule = /^[a-zA-Z0-9]{4,10}$/
					if (inputRule.test(this.profile.username)) {
						this.tip[0] = ""
					} else {
						this.tip[0] = "账号不满足条件"
					}

				}
			},
			chooseSex(val) {
				this.profile[this.type] = val
				console.log(this.profile[this.type])
			},
			//统计字数
			sumfontnum(e) {
				this.fontnum = e.detail.value.length;
				this.profile.info = e.detail.value
				console.log(this.profile.info)
			},
			//保存回车
			doSearch(e) {
				console,
				log(e)
			},
			// 显示遮罩层
			showModal: function() {
				var that = this;
				that.hideModal = true
				var animation = uni.createAnimation({
					duration: 400, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
					timingFunction: 'ease-in', //动画的效果 默认值是linear
				})
				this.animation = animation
				setTimeout(function() {
					that.fadeIn(); //调用显示动画
				}, 200)
			},
			// 隐藏遮罩层                             
			close: function() {
				var that = this;
				var animation = uni.createAnimation({
					duration: 400, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
					timingFunction: 'ease-out', //动画的效果 默认值是linear
				})
				this.animation = animation
				that.fadeDown(); //调用隐藏动画   
				setTimeout(function() {
					that.hideModal = false
					that.$emit('close', !that.show)
				}, 720) //先执行下滑动画，再隐藏模块

			},
			//动画集
			fadeIn: function() {
				this.animation.translateY(0).step()
				this.animationData = this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
			},
			fadeDown: function() {
				this.animation.translateY(0).step() //移动的距离
				this.animationData = this.animation.export()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.mask {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
			z-index: 20;
			position: fixed;
			top: 0;
			left: 0;
		}

		.content {
			width: 100%;
			// height: 100%;
			height: 670rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #F8F8F8;
			z-index: 1000;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
		}

		/*动画前初始位置*/
		.bottom-pos {
			-webkit-transform: translateY(100%);
			transform: translateY(100%);
		}
	}

	.navBar {
		display: flex;
		justify-content: space-between;
		padding: 40rpx;
		font-size: 32rpx;
		letter-spacing: 0.2em;
		background-color: #f8f8f8;
	}

	.form-item {
		margin: 40rpx;
		text-align: left;

		.tips {
			margin-left: 35rpx;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 4rpx;
		}

		.inputClass {
			caret-color: #FF7F00;
			margin-top: 20rpx;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			background-color: white;
			height: 50rpx;
		}

		.sexClass {
			margin-top: 40rpx;
			padding: 30rpx;
			background-color: white;
			border-radius: 40rpx;

			view {
				padding: 15rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		.textClass {
			position: relative;
			caret-color: #FF7F00;
			margin-top: 20rpx;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			background-color: white;

			// height: 50rpx;
			.fontnum {
				color: #909399;
				position: absolute;
				right: 40rpx;
				bottom: 20rpx;
			}
		}
	}
</style>
